<template>
  <!-- <button @click="fetchWeather">查询天气</button> -->
  <div class="bg-weather-primary">
    <header class="header">
      <nav class="container">
        <router-link to="/">
          <div class="logo">
            <span class="icon">
              <i class="iconfont icon-sun1"></i>
            </span>
            <p class="text">新中地天气</p>
          </div>
        </router-link>
        <div class="items-center">
          <h4 class="text">{{ city }}</h4>
          <span class="text-1">实时天气：{{ weather }} {{ temperature }}℃</span>
          <span class="text-1">{{ winddirection }}风 {{ windpower }}级</span>
        </div>
        <div class="items-end">
          <span class="icon" @click="showModal = true">
            <i class="iconfont icon-info"></i>
          </span>
          <span 
            class="icon" 
            v-show="showPlus"
            @click="addCurrentCity"
          >
            <i class="iconfont icon-plus"></i>
          </span>
        </div>
      </nav>
    </header>

    <router-view></router-view>
  </div>
  <transition name="fade">
    <div class="mask" v-if="showModal">
      <Modal @close="showModal = false" />
    </div>
  </transition>
</template>

<script setup>
import Modal from "@/components/Modal.vue"  // 弹框组件
import { ref, onMounted, computed } from "vue"
// 当前实时天气
const city = ref()
const weather = ref()
const temperature = ref()
const winddirection = ref()
const windpower = ref()

// 预报天气
const forecast = ref([])

// 引入 store
import { useWeatherStore } from './store/index.js'
const weatherStore = useWeatherStore()

import {getCityByIp, getCityByName, getWeatherByAdcode} from './api/city.js'
onMounted( async () => {
  const IpCity = await getCityByIp()
  // console.log('当前IP定位城市:', IpCity.city)

  const cityAdcode = await getCityByName(IpCity.city)
  // console.log('城市名称查询adcode:', cityAdcode.geocodes[0].adcode)

  const weatherInfo = await getWeatherByAdcode(cityAdcode.geocodes[0].adcode,) // 获取当前城市实时天气
  // console.log('城市天气信息:', weatherInfo.lives[0])
  city.value = IpCity.city
  weather.value = weatherInfo.lives[0].weather
  temperature.value = weatherInfo.lives[0].temperature
  winddirection.value = weatherInfo.lives[0].winddirection
  windpower.value = weatherInfo.lives[0].windpower

  const Forecast = await getWeatherByAdcode(cityAdcode.geocodes[0].adcode, 'all') // 获取当前城市预报天气
  // console.log('城市天气预报信息:', Forecast.forecasts[0].casts)
  weatherStore.setForecastLocalCity(Forecast.forecasts[0].casts) // 将预报天气存入pinia
})




// 右上角 +
// 当前详情页查询的城市名
import { useRoute } from "vue-router"
const route = useRoute()
const currentSearchCityName = computed(() => (route.query.search || "").trim())  
// 是否已存在于列表中
import { useCityListStore } from "@/store/"
const cityListStore = useCityListStore()
const isCityInList = computed(() => 
  currentSearchCityName.value
    ? cityListStore.cityList.some(c => c.name === currentSearchCityName.value)
    : false
)
// 加号显示条件 有查询参数城市名且未在列表中
const showPlus = computed(() => 
  currentSearchCityName.value && !isCityInList.value
)
// 添加城市事件
function addCurrentCity() {
  cityListStore.addCity(currentSearchCityName.value, "--",)
}

// 弹框组件逻辑
const showModal = ref(false)
</script>

<style scoped>
.bg-weather-primary {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background-color: #00668a;
}

/* header */
.header {
  position: sticky;
  top: 0;
  background-color: #00668a;
  z-index: 10;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.header .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.5rem 10rem;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .header .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .header .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .header .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .header .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .header .container {
    max-width: 1536px;
  }
}
.header .container {
  .logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    .icon .iconfont {
      display: inline-block;
      font-size: 1.5rem;
      line-height: 2rem;
      /* font-weight: 900; */
    }
    .text {
      margin: 0;
      font-size: 1.5rem;
      line-height: 2rem;
    }
  }
}
.header .container .items-center {
  display: flex;
  align-items: center;
  gap: 1rem;
  .text {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 400;
  }
  .text-1 {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
.header .container .items-end {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex: 1 1 0;
  .icon .iconfont {
    font-size: 1.25rem;
    line-height: 1.75rem;
    cursor: pointer;
    transition: all 1s ease;
  }
  .icon .iconfont:hover {
    color: #004e71;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 确保遮罩层在最上层 */
}
</style>
